<template>
  <div>
    <div
      class="echarts_main"
      :style="{
        width: sendStyle.w,
        height: sendStyle.h,
        backgroundColor: sendStyle.bgc,
      }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    sendObj: {
      type: Object,
    },
    sendStyle: {
      type: Object,
    },
  },
  mounted() {
    // console.log(this.sendObj);
    // const myChart = echarts.init(document.querySelector(".echarts_main"));
    // var option;
    // option = {
    //   title: {
    //     text: this.sendObj.title,
    //   },
    //   tooltip: {
    //     trigger: "axis",
    //   },
    //   legend: {
    //     data: this.sendObj.legend,
    //   },
    //   grid: {
    //     left: "3%",
    //     right: "4%",
    //     bottom: "3%",
    //     containLabel: true,
    //   },
    //   toolbox: {
    //     feature: {
    //       saveAsImage: {},
    //     },
    //   },
    //   xAxis: {
    //     type: "category",
    //     boundaryGap: false,
    //     data: this.sendObj.xAxis,
    //   },
    //   yAxis: {
    //     type: "value",
    //   },
    //   series: this.sendObj.series,
    // };
    // myChart.setOption(option);
  },
  watch: {
    sendObj: {
      deep: true,
      handler() {
        console.log(this.sendObj);
        const myChart = echarts.init(document.querySelector(".echarts_main"));
        // option = {
        //   title: {
        //     text: this.sendObj.title,
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //   },
        //   legend: {
        //     data: this.sendObj.legend,
        //   },
        //   grid: {
        //     left: "3%",
        //     right: "4%",
        //     bottom: "3%",
        //     containLabel: true,
        //   },
        //   toolbox: {
        //     feature: {
        //       saveAsImage: {},
        //     },
        //   },
        //   xAxis: {
        //     type: "category",
        //     boundaryGap: false,
        //     data: this.sendObj.xAxis,
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   series: this.sendObj.series,
        // };
        const option = {
          color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
          title: {
            text: this.sendObj.title,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            data: this.sendObj.legend,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: this.sendObj.xAxis,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: this.sendObj.series,
        };
        myChart.setOption(option);
      },
    },
  },
};
</script>

<style lang="less" scoped>
</style>